<template>
  <div>
    <h1>App</h1>

    <ul class="bnav">
      <li v-for="bro in broutes">
        <router-link :to="{ name: bro.name }"><font-awesome-icon :icon="bro.meta.icon" /> {{ bro.meta.label
        }}</router-link>
      </li>
    </ul>

    <ul>
      <li v-for=" ro in routes">
        <router-link :to="{ name: ro.name }"> <font-awesome-icon :icon="ro.meta.icon" /> {{ ro.meta.label
        }} {{ ro.meta.auth }}</router-link>
        <template v-id="ro.children">
          <ul>
            <li v-for="roc in ro.children">
              <router-link :to="{ name: roc.name }">
                <font-awesome-icon :icon="ro.meta.icon" />
                {{ roc.meta.label }} {{ roc.meta.auth }}
              </router-link>
            </li>
          </ul>
        </template>
      </li>
    </ul>
    <div>
      <!-- 不同 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes.filter(el => el.meta.hidden !== true);
    },
    broutes() {
      return [{
        path: '/',
        name: 'sy',
        meta: {
          label: '首页',
          icon: 'fa-solid fa-house'
        }
      }, ...this.$route.matched]
    }
  },
  // mounted() {
  //   console.log(this.$route.matched);
  // }
}
</script>
<style scoped lang="scss">
.bnav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

  li {

    &::after {
      content: '>';
      display: inline-block;
      margin: 0 10px;
    }

    &:last-child::after {
      content: '';
    }

  }
}
</style>